<template>
  <div style="display: flex; border-top: 1px #eee solid; border-bottom: 1px #eee solid">
    <div class="item" @click="clickMenu(1)" :class="{ active: activeName === 1 ? true : false }">
      文章评论
    </div>
    <div class="item" @click="clickMenu(2)" :class="{ active: activeName === 2 ? true : false }">
      问答评论
    </div>
  </div>

  <div>
    <div
      v-if="activeName === 2 ? true : false"
      class="community"
      v-for="community of props.dataList?.communityReview"
      :key="community.id"
      @click="toDetail(community?.bcommunity.id)"
    >
      <div class="title">
        <div v-html="community?.bcommunity.content"></div>
      </div>
      <div style="display: flex; font-size: 14px; color: #787878; padding: 5px 0 10px 0">
        答：
        <div v-html="community?.communityReviewContent"></div>
      </div>
      <div style="font-size: 14px; color: #787878; font-weight: 200">
        回答问题&nbsp;{{ titleUtil.formatDateToYYYYMMDD(community?.createTime) }}
      </div>
    </div>
    <div
      v-else
      class="community"
      v-for="content of props.dataList?.contentReview"
      :key="content.id"
      @click="toContent(content.bcontent)"
    >
      <div class="title">
        <div>{{ titleUtil.title(content.bcontent?.title) }}</div>
      </div>
      <div style="display: flex; font-size: 14px; color: #787878; padding: 5px 0 10px 0">
        答：
        <div v-html="content?.reviewContent"></div>
      </div>
      <div style="font-size: 14px; color: #787878; font-weight: 200">
        回答问题&nbsp;{{ titleUtil.formatDateToYYYYMMDD(content?.createTime) }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import titleUtil from '@/util/titleUtil'
import { useRouter } from 'vue-router'
import store from '@/store'

const props = defineProps({
  dataList: {
    type: Object,
    required: true,
    default: () => {}
  }
})

const router = useRouter()

const activeName = ref(1)

const clickMenu = (menu) => {
  activeName.value = menu
}

const toContent = (item) => {
  console.log('传递前', item)
  store.dispatch('setBlogItem', item)
  router.push('/blogdetail')
}

const toDetail = (id) => {
  router.push({
    name: 'CommunityDetail',
    params: {
      id: id
    }
  })
}
</script>

<style scoped lang="scss">
$fontColor: #ff5100;
body {
  padding: 0;
  margin: 0;
}
.community {
  padding: 10px;
  border-bottom: 1px #eee solid;
}

.item {
  padding: 10px 10px;
  &:hover {
    color: $fontColor;
    cursor: pointer;
  }
}
.active {
  color: $fontColor;
  border-bottom: 2px $fontColor solid;
}
.title {
  font-size: 20px;
  font-weight: 600;
  padding: 10px 0;
  &:hover {
    cursor: pointer;
    color: $fontColor;
  }
}
</style>
